import React from "react";
import { Input, Button, List } from "antd";
import "antd/dist/antd.min.css";

const TodoListUI = (props) => {
  const { inputValue, list, changeInputValue, handleAdd, handleRemove } = props;
  return (
    <div style={{ margin: "10px" }}>
      <div>
        <Input
          value={inputValue}
          placeholder={inputValue}
          onChange={changeInputValue}
          style={{ width: "250px", marginRight: "10px" }}
        />
        <Button onClick={handleAdd} type="primary">
          增加
        </Button>
      </div>
      <div style={{ margin: "10px 0", width: "250px" }}>
        <List
          bordered
          dataSource={list}
          renderItem={(item, index) => (
            <List.Item onClick={() => handleRemove(index)}>
              {item.title}
            </List.Item>
          )}
        />
      </div>
    </div>
  );
};

export default TodoListUI;
